<template>
  <van-nav-bar title="选择餐桌" left-arrow @click-left="onClickLeft" fixed />
  <div class="place_an_order">
    <div class="status">
      <div class="status_project" v-for="item in statusState" :key="item.id">
        <div class="left" :style="{ background: item.color }"></div>
        <p>{{ item.title }}</p>
      </div>
    </div>
    <div class="desk_box">
      <van-tabs v-model:active="active" type="card">
        <van-tab v-for="item in statusState" :title="item.title" :key="item.id">
          <div class="desk_list">
            <div
              class="list_box"
              v-for="val in deskNumber"
              :key="val.id"
              :class="
                val.status == 0 ? 'all' : val.status == 1 ? 'yes' : val.status == 2 ? 'no' : 'noto'
              "
              @click="seleteDesk(val)"
            >
              <p>{{ val.tableNo }}号桌</p>
              <p>{{ val.number }}座位</p>
              <van-icon name="success" v-if="val.currentIsSelect" class="select_status_icon" />
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
  <div class="order_dishes">
    <van-button block type="primary" @click="goDishes">去点菜</van-button>
  </div>
</template>

<script setup>
import { showFailToast, showToast } from 'vant'
import { computed, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useSystemStore } from '@/stores'

const active = ref('1')
const router = useRouter()
const statusState = reactive([
  { id: '0', title: '全部', color: '#1e2bd7' },
  { id: '1', title: '空座', color: '#5adc0b' },
  { id: '2', title: '就餐中', color: '#dc0b37' },
  { id: '3', title: '已预订', color: '#e8e868' }
])


//获取桌子
const deskNumberTable = computed(()=>system.deskNumber)
//筛选后的
const deskNumber = ref([])
//选中的桌子
const checkeds = ref([])
const system = useSystemStore()

//选中桌号
const seleteDesk = (item) => {
  if (item.status != 1) return showFailToast('此桌已被占用')
  //选择桌号
  deskNumber.value.map((i) => {
    if (i.id === item.id) {
      i.currentIsSelect = true
      checkeds.value.push(item.id)
    }
  })
}

//点击去点菜按钮
const goDishes = () => {
  if (checkeds.value.length < 1) return showFailToast('您还没选择桌号')
  let query = checkeds.value.join("")
  router.push({
    path: '/list',
    query
  })
}

//返回
const onClickLeft = () => history.back()

//监听变化
watch(
  () => active.value,
  (val) => {
    if (val != 0) {
      deskNumber.value = deskNumberTable.value.filter((item) => item.status == val)
    } else {
      deskNumber.value = deskNumberTable.value
    }
  },
  {
    immediate: true
  }
)
</script>

<style lang="scss" scoped>
div.place_an_order {

  div.status {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px 0;

    div.status_project {
      display: flex;
      align-items: center;
      justify-content: center;

      div.left {
        width: 40px;
        height: 20px;
        border-radius: 10px;
        margin-right: 5px;
      }

      p {
        font-size: 12px;
        font-weight: bold;
      }
    }
  }

  div.desk_box {
    padding-bottom: 150px;
    div.desk_list {
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 20px;

      div.list_box {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        align-items: center;
        color: #fff;
        font-size: 16px;
        margin-bottom: 10px;
        position: relative;

        p {
          text-align: center;
          line-height: 1.5;
        }

        p:first-child {
          margin-top: 20px;
        }
      }

      .all {
        background: #1e2bd7;
      }

      .yes {
        background: #5adc0b;
      }

      .no {
        background: #dc0b37;
      }

      .noto {
        background: #e8e868;
      }

      .select_status_icon {
        position: absolute;
        bottom: 0px;
        right: 2px;
        color: #fff;
      }
    }
  }
}

.order_dishes {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: #fff;
  border-top:1px solid #f4f4f4;
}
</style>
